<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    td {
      width: 120px;
      height: 50px;
      border: 1px solid black;
      text-align: center;
      line-height: 50px;
    }

    table {
      margin: 50px auto;
    }

    .modDiv {
      width: 300px;
      height: 300px;
      border: 1px solid black;
      padding: 20px;
      box-sizing: border-box;
      position: fixed;
      top: calc(50% - 150px);
      left: calc(50% - 150px);
      background-color: white;
      display: none;
      z-index: 3;
    }

    .cover {
      width: 100%;
      height: 100%;
      position: fixed;
      background-color: rgba(0, 0, 0, 0.4);
      display: none;
      top: 0;
    }
  </style>
</head>

<body>
  <div class="box">
    姓名：<input type="text" class="nameIpt"><br>
    年龄：<input type="text" class="ageIpt"><br>
    城市：<select>
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广州">广州</option>
      <option value="深圳">深圳</option>
      <option value="青岛">青岛</option>
      <option value="长安">长安</option>
      <option value="洛阳">洛阳</option>
    </select><br>
    性别：<input type="radio" name="sex" value="男" class="sexIpt">男
    <input type="radio" name="sex" value="女" class="sexIpt">女<br>

    <button class="addBtn">新增</button>
    <div class="modDiv">
      姓名：<input type="text" class="nameIpt"><br>
      年龄：<input type="text" class="ageIpt"><br>
      城市：<select>
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
        <option value="深圳">深圳</option>
        <option value="青岛">青岛</option>
        <option value="长安">长安</option>
        <option value="洛阳">洛阳</option>
        <!-- <option value="青岛">青岛</option> -->
      </select><br>
      性别：<input type="radio" name="sex" value="男" class="sexIpt">男
      <input type="radio" name="sex" value="女" class="sexIpt">女<br>

      <button class="sure">确定</button>
      <button class="cancel">取消</button>
    </div>

    <table cellspacing="0">
      <thead>
        <td>ID</td>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
        <td>城市</td>
        <td>删除</td>
        <td>修改</td>
      </thead>
      <tbody></tbody>
      <div class="cover"></div>
  </div>

  <script>

    var arr = [
      { id: '1', '姓名': '张三', '性别': '男', '年龄': '18', '城市': '北京' },
      { id: '2', '姓名': '里斯', '性别': '女', '年龄': '19', '城市': '上海' },
      { id: '3', '姓名': '王五', '性别': '男', '年龄': '21', '城市': '长安' },
      { id: '4', '姓名': '赵六', '性别': '女', '年龄': '24', '城市': '洛阳' },
      { id: '5', '姓名': '白七', '性别': '男', '年龄': '80', '城市': '广州' },
      { id: '6', '姓名': '王八', '性别': '女', '年龄': '14', '城市': '深圳' },
      { id: '7', '姓名': '何久', '性别': '男', '年龄': '99', '城市': '青岛' },
    ]

    //获取标签
    const oTbody = document.querySelector('tbody')
    const oBox = document.querySelector('.box')
    const modDiv = document.querySelector('.modDiv')
    const coverDiv = document.querySelector('.cover')
    const nameIpt = document.querySelectorAll('.nameIpt')
    const ageIpt = document.querySelectorAll('.ageIpt')
    const sexIpt = document.querySelectorAll('.sexIpt')
    const cities = document.querySelectorAll('select')


    var num;
    //调用函数 渲染表格
    setPage()
    //设定函数 渲染表格
    function setPage() {

      if (arr.length === 0) {

        oTbody.innerHTML = `<tr><td colspan="7">没有匹配的员工信息</td></tr>`
        return
      }

      let str = ''
      arr.forEach(function (item, index) {
        str += `
            <tr>
              <td>${item.id}</td>
              <td>${item.姓名}</td>
              <td>${item.性别}</td>
              <td>${item.年龄}</td>
              <td>${item.城市}</td>
              <td><button class="delBtn" index="${index}">删除</button></td>
              <td><button class="modBtn" num="${index}">修改</button></td>
           </tr>`
      })
      oTbody.innerHTML = str
    }

    //box事件委托
    oBox.addEventListener('click', function (e) {
      //新增按钮
      if (e.target.className === 'addBtn') {
        let name = nameIpt[0].value
        let age = ageIpt[0].value
        let sex = sexIpt[0].checked ? sexIpt[0].value : sexIpt[1].value
        // console.log(sexIpt[1].value );
        let city = cities[0].value
        console.log(city);

        if (arr.length === 0) {
          arr.push(
            {
              id: 1,
              姓名: name,
              性别: sex,
              年龄: age,
              城市: city
            }
          )
        }
        else {
          arr.push(
            {
              id: Number(arr[arr.length - 1].id) + 1,
              姓名: name,
              性别: sex,
              年龄: age,
              城市: city
            }
          )
        }

        setPage()
      }
      //删除按钮
      else if (e.target.className === 'delBtn') {
        var index = Number(e.target.getAttribute('index'))
        console.log(index);

        if (!(window.confirm(`您确定删除${arr[index].姓名}`))) return

        arr.splice(index, 1)
        setPage()
      }
      //修改按钮
      else if (e.target.className === 'modBtn') {

        num = Number(e.target.getAttribute('num'))

        modDiv.style.display = 'block'
        coverDiv.style.display = 'block'

        nameIpt[1].value = arr[num].姓名
        ageIpt[1].value = arr[num].年龄
        arr[num].性别 === '男' ? sexIpt[2].checked = true : sexIpt[3].checked = true
        cities[1].value = arr[num].城市
        // console.log(arr[num].城市);
        
      }
      //确定按钮
      else if (e.target.className === 'sure') {

        arr[num].姓名 = nameIpt[1].value
        arr[num].年龄 = ageIpt[1].value
        arr[num].性别 = sexIpt[2].checked ? sexIpt[2].value : sexIpt[3].value
        arr[num].城市 = cities[1].value
        modDiv.style.display = 'none'
        coverDiv.style.display = 'none'

        setPage()
      }
      //取消按钮
      else if (e.target.className === 'cancel') {

        modDiv.style.display = 'none'
        coverDiv.style.display = 'none'

        return
      }
    })
  </script>
  </tbody>
  </table>
  <script>

  </script>
</body>

</html>